// import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:puppy_store/models/home_model.dart';
import 'package:puppy_store/pages/home/widgets/loadingBg.dart';
import 'package:puppy_store/widgets/custom_image.dart';

// ignore: must_be_immutable
class HotRecommendsWidget extends StatelessWidget {
  // 由于类存在非 final 字段，移除构造函数中的 const 关键字
  HotRecommendsWidget({this.hotRecommends, super.key});

  final List<HotRecommendsModel>? hotRecommends;

  double _imgWidth = 0.0;

  Widget _buildItem(HotRecommendsModel hotRecommendsModlel) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(10),
      child: Column(
        children: [
          // 主标题
          Row(
            children: [
              Text(
                hotRecommendsModlel.title!,
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w400,
                  color: Color(0xFF262626),
                ),
              ),
              Container(width: 10),
              Text(
                hotRecommendsModlel.caption!,
                style: TextStyle(fontSize: 12, color: Color(0xFF7f7f7f)),
              ),
            ],
          ),
          Padding(padding: EdgeInsets.only(top: 10)),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 左侧图片
              // Image.network(
              //   hotRecommendsModlel.leftIcon!,
              //   width: _imgWidth,
              //   height: _imgWidth,
              //   fit: BoxFit.cover,
              // ),
              // CachedNetworkImage(
              //   imageUrl: hotRecommendsModlel.leftIcon!,
              //   width: _imgWidth,
              //   height: _imgWidth,
              //   fit: BoxFit.cover,
              // ),
              CustomImage(
                url: hotRecommendsModlel.leftIcon!,
                width: _imgWidth,
                height: _imgWidth,
              ),
              Container(width: 10),
              // 右侧图片
              // Image.network(
              //   hotRecommendsModlel.rightIcon!,
              //   width: _imgWidth,
              //   height: _imgWidth,
              //   fit: BoxFit.cover,
              // ),
              // CachedNetworkImage(
              //   imageUrl: hotRecommendsModlel.rightIcon!,
              //   width: _imgWidth,
              //   height: _imgWidth,
              //   fit: BoxFit.cover,
              // ),
              CustomImage(
                url: hotRecommendsModlel.rightIcon!,
                width: _imgWidth,
                height: _imgWidth,
              ),
            ],
          ),
          // 左右图片
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 动态计算图片宽度
    double screenWidth = MediaQuery.of(context).size.width;
    _imgWidth = (screenWidth - 10 * 6 - 5 * 2 - 1) * 0.25;

    if (hotRecommends == null) {
      // return LoadingImgWidget();
      // 骨架图
      return StaggeredGridView.countBuilder(
        physics: NeverScrollableScrollPhysics(), // 禁止滚动冲突
        shrinkWrap: true, // 自适应高度
        crossAxisCount: 2,
        crossAxisSpacing: 1, // 交叉轴间距
        mainAxisSpacing: 1, // 主轴间距
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.white,
            padding: EdgeInsets.all(10),
            child: Column(
              children: [
                // 主标题
                Row(
                  children: [
                    Container(height: 20, width: 70, color: Colors.grey[300]),
                    Container(width: 10),
                    Container(height: 16, width: 70, color: Colors.grey[300]),
                  ],
                ),
                Padding(padding: EdgeInsets.only(top: 10)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      color: Colors.grey[300],
                      width: _imgWidth,
                      height: _imgWidth,
                    ),
                    Container(width: 10),
                    Container(
                      color: Colors.grey[300],
                      width: _imgWidth,
                      height: _imgWidth,
                    ),
                  ],
                ),
                // 左右图片
              ],
            ),
          );
        }, // 子组件构建器
        itemCount: 4, // 子组件数量
        staggeredTileBuilder: (index) => StaggeredTile.fit(1), // 子组件的布局方式
      );
    }
    return StaggeredGridView.countBuilder(
      physics: NeverScrollableScrollPhysics(), // 禁止滚动冲突
      shrinkWrap: true, // 自适应高度
      crossAxisCount: 2,
      crossAxisSpacing: 1, // 交叉轴间距
      mainAxisSpacing: 1, // 主轴间距
      itemBuilder: (BuildContext context, int index) {
        return _buildItem(hotRecommends![index]);
      }, // 子组件构建器
      itemCount: hotRecommends!.length, // 子组件数量
      staggeredTileBuilder: (index) => StaggeredTile.fit(1), // 子组件的布局方式
    );
  }
}
